#container{
    margin: auto;
    width: 900px;
    background-image: url(assets/tech.jpg);
    background-size: 100% ;
    padding: 10px;
}
#titleimage{
    width: 900px;
    
}
@font-face{
    font-family:astrella;
    src: url(assets/astrella/Astrella.otf)
}
@font-face{
    font-family:alika;
    src: url(assets/Alika\ Misely.ttf)
}
#title{
    height:300px;
    background-image: url(assets/microsoft.webp);
    background-size: 100%;
    transition: 1s;
}
#title:hover{
    height:500px;
}
#nav{
    width: 900px;
}
h1{
    font-family: astrella;
}
body{
    font-family:alika;
}
#navimg{
    width: 900px;
}
#sidenav{
    width: 200px;
    background-color: black;
    float: left;
    position: absolute;
    opacity: 0%;
    transition: 0.5s;
}
#nav:hover #sidenav{
    opacity: 100%;
}
#sidenavimg{
    width: 200px;
}
#slay{
    background-color: rgba(136, 136, 136,50%);
}
    

#story{
    column-count: 3;
}
#small{
    width: 280px;
    opacity: 50%;
    transition: 1s;
}
#small:hover{
    opacity: 100%;
}
.photobox {
	float:left;
	width: 100px;
    height: 210px;
	padding: 10px;
	background-color: rgba(136, 136, 136,50%);
    background-image: url(assets/blind\ mockup.jpg);
    background-size: 100% 100% ;
	color: white;
	transition: 2s;
	margin-right: 10px;
}
.photobox:hover{
	width: 90%;
    height: 520px;
	background-color: hotpink;
}
@media print {
    
    #titleimage{
        display: none; 
    }
    #title{
        display: none; 
    }
    #navimg{
        display: none;
    }
    .photobox{
        display: none;
    }
    #small{
        display: none;
    }
    #sidenav{
        display:none;
    }
}